<template>
    <div>
        <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="100px">
            <el-row>
                <el-col :span="8">
                    <el-form-item label="周期" prop="reportCycle">
                        <el-select 
                        v-model="formData.reportCycle" 
                        placeholder="请选择周期" 
                        clearable
                        >
                            <el-option v-for="(item, index) in reportCycleOptions" 
                            :key="index" 
                            :label="item.label"
                            :value="item.value" 
                            ></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="日期类型" prop="dayType">
                        <el-select 
                        v-model="formData.dayType" 
                        placeholder="请选择日期类型" 
                        clearable 
                        >
                            <el-option v-for="(item, index) in dayTypeOptions" 
                            :key="index" 
                            :label="item.label"
                            :value="item.value" 
                            :disabled="item.disabled"
                            ></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
              <!-- 周期为日时显示，选择t日 -->
              <el-col :span="7" v-if="formData.reportCycle === 1">
                  <el-form-item label="T日" prop="tday">
                      <el-select 
                      v-model="formData.tday" 
                      placeholder="请选择T日" 
                      clearable 
                      >
                          <el-option v-for="(item, index) in tdayOptions" 
                          :key="index" 
                          :label="item.label"
                          :value="item.value" 
                          :disabled="item.disabled"
                          ></el-option>
                      </el-select>
                  </el-form-item>
              </el-col>
              <!-- 周期为周、月、年时显示，选择数据周期 -->
              <el-col :span="12" v-if ="formData.reportCycle && formData.reportCycle !== 1">
                  <el-form-item label="生成周期" prop="genCycle">
                      <el-radio v-model="formData.genCycle" label="0">本周期</el-radio>
                      <el-radio v-model="formData.genCycle" label="1">下周期</el-radio>
                  </el-form-item>
              </el-col>
              <!-- 周期为年时显示 -->
              <el-col :span="7" v-if="formData.reportCycle === 4">
                  <el-form-item label="月" prop="month">
                      <el-select 
                      v-model="formData.month" 
                      placeholder="请选择月份" 
                      clearable 
                      >
                          <el-option v-for="(item, index) in monthOptions" 
                          :key="index" 
                          :label="item.label"
                          :value="item.value" 
                          :disabled="item.disabled"
                          ></el-option>
                      </el-select>
                  </el-form-item>
              </el-col>
              <!-- 周期为周、月、年时显示，周期为周选择周几、周期为年月选择日期 -->
              <el-col :span="8" v-if="formData.reportCycle && (formData.reportCycle === 3 || formData.reportCycle === 4)">
                  <el-form-item label="日" prop="day">
                      <el-select 
                      v-model="formData.day" 
                      placeholder="请选择日" 
                      clearable 
                      >
                          <el-option v-for="(item, index) in dayOptions" 
                          :key="index" 
                          :label="item.label"
                          :value="item.value" 
                          :disabled="item.disabled"
                          ></el-option>
                      </el-select>
                  </el-form-item>
              </el-col>
              <el-col :span="8" v-if="formData.reportCycle && formData.reportCycle === 2">
                  <el-form-item label="周" prop="week">
                      <el-select 
                      v-model="formData.week" 
                      placeholder="请选择周" 
                      clearable 
                      >
                          <el-option v-for="(item, index) in weekOptions" 
                          :key="index" 
                          :label="item.label"
                          :value="item.value" 
                          :disabled="item.disabled"
                          ></el-option>
                      </el-select>
                  </el-form-item>
              </el-col>
            </el-row>
            <el-form-item label="生成时间" prop="time">
                <el-time-picker 
                v-model="formData.time" 
                format="HH:mm:ss" 
                value-format="HH:mm:ss"
                :picker-options='{"selectableRange":"00:00:00-23:59:59"}' 
                placeholder="请选择时间" 
                clearable>
                </el-time-picker>
            </el-form-item>
        </el-form>
    </div>
  </template>


  <script>
  export default {
    inheritAttrs: false,
    components: {},
    props: {
        innerTimeConfig: {
          type: String,
          required: false,
          default: ""
        }
      },
    data() {
      return {
        formData: {
          reportCycle: '',
          month: undefined,
          dayType: undefined,
          tday: undefined,
          time: undefined,
          day: undefined,
          genCycle: undefined,
          week: undefined,
        },
        timeConfigJson: undefined,
        rules: {
          reportCycle: [{
            required: true,
            message: '请选择周期',
            trigger: 'change'
          }],
          month: [],
          dayType: [{
            required: true,
            message: '请选择日期类型',
            trigger: 'change'
          }],
          tday: [
            {
              required: true,
              message: '请选择T日',
              trigger: 'change'
            }
          ],
          genCycle: [{
            required: true,
            message: '请选择生成周期',
            trigger: 'change'
          }],
          month: [
            {
              required: true,
              message: '请选择月份',
              trigger: 'change'
            }
          ],
          day: [
            {
              required: true,
              message: '请选择日',
              trigger: 'change'
            }
          ],
          time: [{
            required: true,
            message: '请选择时间',
            trigger: 'change'
          }],
          week:[
            {
              required: true,
              message: '请选择周',
              trigger: 'change'
            }
          ]
        },
        reportCycleOptions: [
          { label: "日", value: 1 },
          { label: "周", value: 2 },
          { label: "月", value: 3 },
          { label: "年", value: 4 }
        ],
        // 周期类型选项
        dayTypeOptions: [
          { label: "自然日", value: 0 },
          { label: "交易日", value: 1 }
        ],
        // 月选项
        monthOptions: this.generateOptions(12, index => ({
          label: `${index + 1}月`,
          value: index + 1
        })),
        // T日选项
        tdayOptions: this.generateOptions(31, index => ({
          label: `${index}日`,
          value: index
        })),
        // 星期选项
        weekOptions: [],
        constantWeekOptions: [
          { label: "星期一", value: 1 },
          { label: "星期二", value: 2 },
          { label: "星期三", value: 3 },
          { label: "星期四", value: 4 },
          { label: "星期五", value: 5 },
          { label: "星期六", value: 6 },
          { label: "星期天", value: 7 },
        ],
        // 日选项
        dayOptions: [],
      }
    },
    computed: {},
    watch: {
      // 监听周期类型，更新天的下拉选项值
      'formData.dayType': function(newVal, oldVal) {
        // 周期为周时
        if (this.formData.reportCycle === 2){
          if (newVal === 1) { // 如果日期类型为交易日，选项为星期一到星期五
            this.weekOptions = this.constantWeekOptions;
          }else if (newVal === 2) { // 如果日期类型为交易日，选项为星期一到星期五
            this.weekOptions = this.constantWeekOptions.filter(option => option.value <= 5);
          }
          // 在每个选项列表的末尾添加一个"最后一天"的选项
            this.weekOptions.push({ label: '最后一天', value: 'L' });
        }else if (this.formData.reportCycle === 3 || this.formData.reportCycle === 4){
          // 周期为月、年时
          if (newVal === 1) { // 如果日期类型为自然日，选项为1-31
          this.dayOptions = Array.from({ length: 31 }, (_, index) => ({
            label: (index + 1).toString(),
            value: index + 1
          }));
          } else if (newVal === 2) { // 如果日期类型为交易日，选项为1-22
            this.dayOptions = Array.from({ length: 22 }, (_, index) => ({
              label: (index + 1).toString(),
              value: index + 1
            }));
            // 在每个选项列表的末尾添加一个"最后一天"的选项
            this.dayOptions.push({ label: '最后一天', value: 'L' });
          }
        }
      },
      // time 被选择后，将 formData 转化为 JSON 格式的字符串并赋值给 timeConfigJson
      'formData.time': function(newVal, oldVal) {
        this.timeConfigJson = JSON.stringify(this.formData);
        // 调用方法将数据传递给父组件
        this.onTimeConfigJsonChange();
      }
    },
    created() {
      // console.log(this.innerTimeConfig)
      // 初始化时使用父组件传递的 JSON 字符串设置 formData
      if (!this.innerTimeConfig) {
        return;
      }
      const parsedData = JSON.parse(this.innerTimeConfig);
      // 将解析后的数据赋给 formData 中的每个属性
      Object.keys(parsedData).forEach(key => {
        this.$set(this.formData, key, parsedData[key]);
      });
    },
    mounted() {},
    methods: {
      // 将数据传递给父组件
      onTimeConfigJsonChange() {
        this.$emit('timeConfigJsonChanged', this.timeConfigJson);
      },
      // 生成选项数组的通用函数
      generateOptions(length, callback) {
        return Array.from({ length }, (_, index) => callback(index));
      }
    }
  }
  
  </script>
  